import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

///Flutter 中，我们可以通过Image组件来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络。

class ImgAndIcon extends StatelessWidget {
  const ImgAndIcon({super.key});

  @override
  Widget build(BuildContext context) {
    String icons = "";
  // accessible: 0xe03e
    icons += "\uE03e";
  // error:  0xe237
    icons += " \uE237";
  // fingerprint: 0xe287
    icons += " \uE287";

    //MainAxisAlignment（主轴）就是与当前控件方向一致的轴，而CrossAxisAlignment（交叉轴）就是与当前控件方向垂直的轴
    //例如Row
    // MainAxisAlignment是水平的，默认起始位置在左边，排列方向为从左至右
    return Center(
      child: DefaultTextStyle(
        style:
            const TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              //从本地加载 AssetImage
              const Image(
                image: AssetImage("images/img.jpg"),
                width: 80,
                height: 80,
              ),
              Image.asset(
                "images/img2.jpg",
                width: 80,
                height: 80,
              ),
              //从网络加载 NetworkImage
              const Image(
                image: NetworkImage(
                    "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
                width: 80,
                height: 80,
              ),
              const SizedBox(
                height: 12,
              ),
              Image.network(
                "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
                width: 80,
                height: 80,
              ),
              const Text("Image fit属性：该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。"),
              const Text("适应模式是在BoxFit中定义，它是一个枚举类型，有如下值："),
              const Text("BoxFit.fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形:"),
              Image.network(
                "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
                fit: BoxFit.fill,
                width: 100,
                height: 80,
              ),
              const Text(
                  "BoxFit.cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。"),
              Image.network(
                "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
                fit: BoxFit.cover,
                width: 50,
                height: 80,
              ),
              const Text(
                  "BoxFit.contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。"),
              Image.asset(
                "images/img3.jpg",
                width: 60,
                height: 60,
              ),
              const Text(
                  "BoxFit.fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。"),
              Image.network(
                "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
                fit: BoxFit.fitWidth,
                width: 88,
              ),
              const Text(
                  "fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。"),
              Image.asset(
                "images/img3.jpg",
                height: 68,
                fit: BoxFit.fitHeight,
              ),
              const Text(
                  "none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。"),
              Image.asset(
                "images/img3.jpg",
                fit: BoxFit.none,
                width: 100,
                height: 100,
              ),
              const Text(
                  "color和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color指定混合色，而colorBlendMode指定混合模式"),
              Image.asset(
                "images/img3.jpg",
                width: 100,
                height: 100,
                color: Colors.blue,
                colorBlendMode: BlendMode.difference,
              ),
              const Text("repeat：当图片本身大小小于显示空间时，指定图片的重复规则"),
              Image.asset(
                "images/img3.jpg",
                width: 861,
                height: 50,
                repeat: ImageRepeat.repeatX,
              ),
              const SizedBox(
                height: 30,
              ),
              const Text("ICON"),
              const Text(
                "Flutter 中，可以像Web开发一样使用 iconfont，iconfont 即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片",
                style: TextStyle(inherit: false, color: Colors.redAccent),
              ),
              Text(
                icons,
                style: const TextStyle(inherit: false,fontFamily: "MaterialIcons",fontSize: 24.0,color: Colors.green),
              ),
              const Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.one_k,color: Colors.green,),
                  Icon(Icons.money,color: Colors.green,),
                  Icon(Icons.fingerprint,color: Colors.green,),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}
